<template>
	<view class="present-award">
		<div class="navbar">
			<div class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				待领取
			</div>
			<div class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				已领取
			</div>
		</div>
		<view class="no-result" v-if="presentList.length == 0">
			<xw-empty :isShow="presentList.length == 0" text="暂无数据" textColor="#777777" style="margin: 0 auto;"></xw-empty>
		</view>
		<view class="award-item" v-else v-for="item in presentList" :key="item.id">
			<view class="title">
				<view class="time">发放时间: {{ item.create_time }}</view>
			</view>
			<view class="award-list">
				<view class="coupon-awad" v-if="item.coupon.length" v-for="item2 in item.coupon" :key="item2.id">
					<uni-tag text="优惠券" :inverted="true"/>
					<view class="line1" style="margin-left: 20rpx;">{{ item2.name }} x {{ item2.num }}</view>
				</view>
				
				<view class="coupon-awad" v-if="item.integral > 0">
					<uni-tag text="积分" :inverted="true"/>
					<view class="line1" style="margin-left: 40rpx;">{{ item.integral }}积分</view>
				</view>
				<view class="coupon-awad" v-if="item.balance > 0">
					<uni-tag text="余额" :inverted="true"/>
					<view class="line1" style="margin-left: 40rpx;">{{ item.balance }}元</view>
				</view>
			</view>
			<view class="receive-btn" v-if="filterIndex == 1" @click="receive(item)">立即领取</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterIndex: 1,
				lastPage: 1,
				presentList: [],
				searchForm: {
					status: 1,
					page: 1,
					limit: 10
				}
			}
		},
		onReachBottom() {
			this.searchForm.page += 1
			if (this.searchForm.page <= this.lastPage) {
				this.getPresentList()
			}
		},
		mounted() {
			this.getPresentList()
		},
		methods: {
			// 奖励列表
			async getPresentList(type) {
				let res = await this.$api.present.getPresentList.get(this.searchForm)
				if (type == 'more') {
					this.presentList = res.data.data.concat(this.presentList)
				} else {
					this.presentList = res.data.data
				}
				
				this.lastPage = res.data.last_page
			},
			tabClick(status) {
				this.filterIndex = status
				this.searchForm.status = status
				this.searchForm.page = 1
				this.getPresentList()
			},
			async receive(row) {
				let res = await this.$api.present.receive.post({id: row.id})
				if (res.code == 0) {
					this.$tool.success(res.msg)
					this.searchForm.page = 1
					this.getPresentList()
				} else {
					this.$tool.error(res.msg)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: rgb(248, 248, 248);
	}
	.present-award {
		padding: 20rpx;
		width: 100%;
		height: 100%;
	}
	.award-item {
		width: 100%;
		background: #fff;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 20rpx;
		min-height: 320rpx;
		padding-bottom: 40rpx;
		.title {
			width: 100%;
			height: 80rpx;
			font-size: 24rpx;
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 0px 40rpx;
		}
		.award-list {
			width: 100%;
			.coupon-awad {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				padding-left: 40rpx;
				font-size: 26rpx;
			}
		}
	}
	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.receive-btn {
		padding: 10rpx 20rpx;
		width: 144rpx;
		font-size: 24rpx;
		border-radius: 10rpx 20rpx;
		border: 1px solid #e93939;
		background: #e93939;
		color: #fff;
		position: relative;
		left: 74%;
	}
	.navbar{
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 100%;
					height: 0
				}
			}
		}
	}
</style>